<template>
    <div class="bottom-nav">
        <div class="flex-between" style="height: 100%;width: 100%;">
            <div class="nav-left-box pointer" @click.stop="openMenu('leftmenuVisible')">
                <div class="nav-img">
                    <img src="../assets/icon/weather.png" alt="">
                </div>
                <div class="temp-box">
                    <p class="temp-1">22°C</p>
                    <p class="temp-2">晴朗</p>
                </div>
            </div>

            <div class="nav-middle-box">
                <el-tooltip
                    effect="light"
                    content="开始"
                    placement="top"
                    :visible-arrow='false'
                    popper-class='z-popover'
                    >
                    <div class="nav-img-box nav-img pointer" @click.stop="openMenu('homemenuVisible')">
                        <img src="../assets/icon/home.png" alt="">
                    </div>
                </el-tooltip>
                
                <el-tooltip
                    effect="light"
                    content="搜索"
                    placement="top"
                    :visible-arrow='false'
                    popper-class='z-popover'
                    >
                    <div class="nav-img-box nav-img pointer">
                        <img src="../assets/icon/search.png" alt="">
                    </div>
                </el-tooltip>
               

                <el-popover
                placement="top"
                :show-arrow="false"
                v-for="item in dataSource"
                :key="item.id"
                :width="item.child.length*115"
                popper-class='z-popover'
                >
                    <template #reference>
                        <div 
                        class="nav-img-box nav-img pointer nav-active"
                        @click='openWindow(item)'>
                            <img :src="item.icon" alt="item.name">
                        </div>
                    </template>
                    <template #default>
                        <div class="popover">
                            <div 
                            v-for='value in item.child' :key='value.cid' 
                            :class="{'window-icon':true,'window-active':value.isShow===true}"
                            @click='showWindow(value)'>
                                <img :src="value.icon" alt="value.name">
                            </div>
                        </div>
                    </template>
                </el-popover>  
            </div>

            <div class="flex-center" style="margin-right: 10px;">
                <div class="nav-right-box" @click.stop="openMenu('controlmenuVisible')">
                    <div class="nav-img-box nav-img pointer" style="width: 28px">
                        <img src="../assets/icon/wifi.png" alt="">
                    </div>
                    <div class="nav-img-box nav-img pointer">
                        <img src="../assets/icon/audio.png" alt="">
                    </div>
                    <div class="nav-img-box nav-img pointer">
                        <img src="../assets/icon/battery.png" alt="">
                    </div>
                </div>
                <div class="nav-right-time-box nav-right-box pointer" @click.stop="openMenu('dateVisible')">
                    <p>{{time}}</p>
                    <p>{{date}}</p>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import { toRefs,reactive } from 'vue'
export default {
  name: 'BottomNav',
  components: {},
  props: {
    dataSource:{
        type:Array,
        default:null
    },
    time:{
        type:String,
        dafault:''
    },
    date:{
        type:String,
        default:''
    }
  },
  emits: ['openMenu','showWindow','openWindow'],
  setup(props,context) {
    let methods = reactive({
        openMenu(value){
            context.emit('openMenu',value)
        },
        showWindow(value){
            context.emit('showWindow',value)
        },
        openWindow(value){
            context.emit('openWindow',value)
        }
    })
    return {
        ...toRefs(methods)
    }
  }
}

</script>
<style lang='scss' scoped>
.bottom-nav {
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 0;
    z-index: 9999;
    // background-color: rgba(255,255,255,.8);
    // background-color: #f8d7ee;
    background: linear-gradient(-90deg, #ffcef3,#ffe4fb);
}

.nav-img {
    // height: 30px;
    width: 30px;
    display: flex;
    align-items: center;

    img {
        width: 100%;
        height: 100%;
    }
}

.nav-left-box {
    width: 100px;
    background-color: transparent;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-radius: 5px;
    padding: 3px;
    margin-left: 10px;
    transition: all .2s;

    .temp-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: $fontMini;
        margin-left: 5px;

        .temp-1 {
            color: $PrimaryTextColor;
        }

        .temp-2 {
            color: $SencondTextColor;
        }
    }

    &:hover {
        background-color: $white;
        // opacity: .7;

    }
}

.nav-middle-box {
    display: flex;
    align-items: center;
    justify-content: center;

}

.nav-img-box {
    width: 35px;
    // height: 35px;
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 5px;
    background-color: transparent;
    margin: 0 5px;
    transition: all .2s;

    &:hover {
        background-color: $white;
        // opacity: .7;
    }
}

.nav-right-box {
    display: flex;
    align-items: center;
    padding: 3px;
    margin: 0 5px;
    border-radius: 5px;
    background-color: transparent;
    transition: all .2s;

    &:hover {
        background-color: rgba(255,255,255);
        // opacity: .7;
    }

    .nav-img-box {
        width: 30px;
        margin: 0;
    }
}


.nav-right-time-box {
    flex-direction: column;
    font-size: $fontMini;
    align-items: flex-end;
}

.nav-active {
    background-color: rgba(255,255,255, .6);
}

.popover {
    padding: 5px;
    border-radius:5px;
    background-color: $white;
    display: flex;
    align-items: center;
    justify-content: center;

    .window-icon {
        width: 80px;
        height: 80px;
        padding: 10px;
        background-color: transparent;
        border-radius: 5px;
        cursor: pointer;
        margin: 0 10px;

        &:hover {
            background-color: rgba(201, 201, 201, 0.4);
        }
    }

    .window-active {
        background-color: rgba(201, 201, 201, 0.6);
    }
}
</style>
